<template lang="pug">
  #canvasWrap(v-show="isShow && !isVrMode", v-loading="loading", element-loading-text="正在合成图片...", @touchmove="handleDragPrevent")
    #canvas-inner
      img.canvas-qrcode(v-dragmove="dragmove", :src="qrcodeimg")
      .editor-text.hand(v-dragmove="dragmove", ref='editableWrap')
        p(ref='editorText') {{text}}

    p.text.pos-a.tac 二维码与输入的文字均可拖动改变位置
    .ctrl-bar.ctrl-bar-top.ctrl-bar-mid(@click="removeScreenshots")
      .icon
        i.iconfont &#xe60b;
    .btn-group.pos-a.tac(v-show="showComposeBtn")
      .text-input(@click='handleInput')
        el-input(v-model='text', @blur='handleBlur', placeholder='输入文字，可拖动改变位置', ref='inputForm')
      .btn.save-btn.hand(@click="handleCompose") 合成图片
</template>

<script>
import html2canvas from 'html2canvas'
import vrMixins from '@/mixins/vr'
import {
  handleDefPrevent
} from '@/utils'

export default {
  mixins: [vrMixins],
  data() {
    return {
      isShow: false,
      loading: false,
      showComposeBtn: true,
      text: '',
      dragmove: '', // 二维码拖拽
      qrcodeimg: '', // 二维码src
    }
  },
  mounted() {
    this.$vgo.on('hide:screenshot', () => {
      this.isShow = false
    })
  },
  methods: {
    handleInput() {
      setTimeout(() => {
        this.$refs.inputForm.focus()
      }, 0)
    },
    handleBlur () {
      window.scrollTo(0, 0)
    },
    showScreenshots() {
      this.isShow = true
      this.qrcodeimg = $globalconfig.URLS.API + '/api_qrcode.aspx?id='+ this.$route.params.panoId +'&newpano=1'
    },
    // 合成图片
    handleCompose() {
      let self = this
      let cvsWrap = document.querySelector('#canvasWrap')
      let cvsCompose = cvsWrap.querySelector('#canvas-inner')
      let img = cvsCompose.querySelector('img')

      // 处理密码页面报错，找不到cvsCompose问题
      // console.log(cvsCompose)
      if(!cvsCompose) return

      this.loading = true
      // 清掉编辑文字的背景色
      try {
        this.$refs.editableWrap.style.backgroundColor = 'rgba'
        cvsCompose.style.transform = 'scale(1)'
      } catch(e) {
        console.log(e)
      }

      html2canvas(cvsCompose, {useCORS: true, backgroundColor: null, timeout: 500}).then(function(canvas) {
        cvsWrap.append(canvas)

        setTimeout(() => {
          let cvsObj = cvsWrap.querySelectorAll('canvas')[1]
          cvsWrap.insertBefore(Canvas2Image.convertToJPEG(cvsObj, cvsObj.offsetWidth * 2, cvsObj.offsetHeight * 2), cvsCompose)
          cvsCompose.style.transform = 'scale(0.8)'

          self.loading = false
          self.showComposeBtn = false
          self.text = ''
          self.$vgo.tip('合成成功', 'success')
          self.$vgo.emit('compose:success')

        }, 1500)
      })
    },
    removeScreenshots() {
      let cvsWrap = document.querySelector('#canvasWrap')
      let cvsCompose = cvsWrap.querySelector('#canvas-inner')
      let cvsObj = cvsWrap.querySelectorAll('canvas')
      let img = cvsWrap.querySelectorAll('img')

      if(cvsObj.length) {
        if(this.showComposeBtn) {
          cvsObj[0].remove()
        } else {
          cvsObj[0].remove()
          if(cvsObj[1]) {
            cvsObj[1].remove()
          }
          if(img && img.length > 1) {
            img[0].remove()
          }
        }
      }

      this.isShow = false
      this.showComposeBtn = true
      this.text = ''
      this.$vgo.emit('compose:remove')
    },
    handleDragPrevent(e) {
      handleDefPrevent(e)
    }
  },
  directives: {
    dragmove: { // fuck you
      bind: function(el, binding) {
        let canvas = document.querySelector('#canvas-inner')
        let obj = el
        let vW = document.documentElement.clientWidth || document.body.clientWidth
        let vH = document.documentElement.clientHeight || document.body.clientHeight
        let lW = Math.floor(vW * 8 / 10)
        let lH =  vW / (vW / vH)
        obj.ontouchstart = function(ev) {
          let touch = ev.touches[0]

          let disX = touch.clientX - obj.offsetLeft
          let disY = touch.clientY - obj.offsetTop
          let limitH = lH + (vH - lH)/2 - obj.offsetHeight
          let limitW = vW - (vW -lW)/6

          document.ontouchmove = function(ev) {

            let touch = ev.touches[0]

            let l = touch.clientX - disX + (disX * 0.8)
            let t = touch.clientY - disY

            // if(l < (vW - lW)/6 ) {
            //   l = (vW - lW)/6
            // } else if(l > limitW) {
            //   l = limitW
            // }
            let disW = Math.floor((vW - (vW * 0.8))/2)
            if(l < (vW - (vW * 0.8))/2 ) {
              l = (vW - (vW * 0.8))/2
            } else if(l > disW + (vW * 0.8)) {
              l =  disW + (vW * 0.8)
            }

            if(t < 0) {
              t = 0
            } else if( t > limitH ) {
              t = limitH
            }

            obj.style.left = l + 'px'
            obj.style.top = t + 'px'
          }
          document.ontouchend = function() {
            document.ontouchmove = null
            document.ontouchend = null
          }
          return false
        }
      }
    }
  }
}
</script>

<style lang="stylus">
#canvasWrap
  position: absolute
  left: 0
  top: 0
  width: 100%
  height: 100%
  background: rgba(0, 0, 0, .77)
  z-index: 4999
  & > canvas
    z-index: -1
  & > img
    z-index: 4999
  & > canvas, & > img
    position: absolute
    left: 0
    top: 0
    width: 100%
    height: 100%
    transform: scale(.8)
  #canvas-inner
    transform: scale(.8)
    .canvas-qrcode
      position: absolute
      top: 10%
      left: 50%
      margin-left: -50px
      width: 100px
      height: 100px
      z-index: 2
  .editor-text
    position: absolute
    top: 50%
    left: 50%
    max-width: 60%
    max-height: 100px
    padding: 10px
    font-size: 18px
    color: #fff
    transform: translateX(-50%)
    z-index: 2
  p.text
    left: 5%
    top: 5%
    width: 90%
    color: #fff
    font-size: 14px
    z-index: 2

  .btn-group
    display: flex
    left: 10%
    bottom: 5%
    width: 80%
    height: 35px
    line-height: 35px
    font-size: 12px
    color: #fff
    .text-input
      flex: 0 0 80%
      input
        border-radius: 0
        height: 35px
        box-sizing: border-box
      input::placeholder
        font-size: 12px
        line-height: 35px
    .btn
      flex: 1
      padding: 0 5px
    .save-btn
      height: 35px
      background: #409EFF
      white-space nowrap 
    .share-btn
      background: #67C23A
</style>
